<!-- home.vue -->
<template>
  <!-- 直接从 store 中访问 state -->
  <div class="home">
    大家好，我是vue3
    <div class="box">
      我是一个盒子:
    </div>
    <el-button type='primary' icon='search' @click='btnClick'>Search</el-button>
  </div>
</template>
   
<script setup>
import {useUserStore} from '../stores/user.js';
import { toRaw } from 'vue'

const userStore = useUserStore()
// //执行pinia中的getUserData方法
// userStore.getUserData()
// //获取pinia中的userInfo数据
// console.log(userStore.userInfo);
import {myGet, myPost} from '../api/home.js'
async function btnClick() {
//  let {getData} = await myGet()
//        console.log('myGet解构后的数据',getData)

//  .then(
//     response => {
//       console.log('btnClick  myGet response',response)
//     })
//     .catch(error => {
//       console.log(error)
//     })
  let {getData} = await myPost()
      userStore.getUserData(getData)
      /*
      //第一种方法 通过json序列化
      console.log('userStore.userInfo',JSON.parse(JSON.stringify(userStore.userInfo)))
      */
      //第二种：通过vue中的响应式对象可使用toRaw()方法获取原始对象
      //import { toRaw } from 'vue',这里已经实现了按需引入vue，所以在开始没有引入import { toRaw } from 'vue'

      const trueUserInfo=toRaw(userStore.userInfo)
      console.log('userStore.userInfo',trueUserInfo)
  // .then(
  //   response => {
  //     console.log('response.data',response.getData[0]);
  //     userStore.getUserData(response.getData[0])
  //     console.log('userStore.userInfo',userStore.userInfo)
  //   })
  //   .catch(error => {
  //     console.log(error)
  //   })

}
</script>
<style>
.home{
  color: pink;

}
.box{
  color: yellowgreen;
  border: 1px solid yellowgreen
}
</style>